<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <style>
        #nav {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        a {
            padding: 70px;
        }

        #ai {
            padding-top: 20px;
            padding-right: 30px;
        }

        #logo {
            padding-left: 70px;
        }

        .animated {
            animation-duration: 3s;
            animation-fill-mode: both;
        }

        body::-webkit-scrollbar {
            display: none;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        footer {
            background-color: #ffffff;
            color: #000000;
            padding: 20px 0;
            text-align: center;
        }

        footer ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        footer ul li {
            display: inline-block;
            margin: 0 10px;
        }

        footer a {
            color: #020000;
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
        }

        .fadeIn {
            animation-name: fadeIn;
        }
    </style>
</head>

<body>
    <div id="nav">
        <div id="logo">
            <img src="image/logo.png" width="200px" height="auto" />
        </div>
        <div id="ai">
            <a>联系我们</a>
            <span>|</span>
            <a href="login.jsp">登录</a>
            <a class="btn btn-success" href="register.jsp">免费注册</a>
        </div>
    </div>

    <div>
        <p class="animated fadeIn" style="font-size:70px;text-align:center;font-weight: bold;padding-top:100px">
            免费，有趣，<span style="color:#4CD263">科学</span></p>
        <p class="animated fadeIn" style="text-align: center;font-size: 30px;padding: 30px;">Online Judge 编程练习平台</p>
        <p class="animated fadeIn" style="text-align: center;padding: 20px;"><a class="btn btn-success"
                href="register.jsp">免费注册</a></p>
        <p class="animated fadeIn" style="text-align: center;padding: 20px;"><a href="login.jsp">已有账号？点此登录</a></p>
    </div>

    <div class="row mt-5" style="padding:20px">
        <div class="col-md-4" style="text-align: center;">
            <div class="card"  style=" box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
                <div class="card-body pb-5">
                    <div class="pt-4 pb-5">
                        <img src="image/illustration-5.svg" class="img-fluid img-center" style="height: 150px;" alt="插画" />
                    </div>
                    <h5 class="h4 lh-130 mb-3">释放创造力</h5>
                    <p class="text-muted mb-0">拆解任务构建逻辑，以代码实现创意</p>
                </div>
            </div>
        </div>
        <div class="col-md-4" style="text-align: center;">
            <div class="card" style=" box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
                <div class="card-body pb-5">
                    <div class="pt-4 pb-5">
                        <img src="image/illustration-6.svg" class="img-fluid img-center" style="height: 150px;" alt="插画" />
                    </div>
                    <h5 class="h4 lh-130 mb-3">方便快捷</h5>
                    <p class="text-muted mb-0">无需下载，在网页端即可使用本平台</p>
                </div>
            </div>
        </div>
        <div class="col-md-4" style="text-align: center;">
            <div class="card"  style=" box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
                <div class="card-body pb-5">
                    <div class="pt-4 pb-5">
                        <img src="image/illustration-7.svg" class="img-fluid img-center" style="height: 130px;" alt="插画" />
                    </div>
                    <h5 class="h4 lh-130 mb-3">趣味益智</h5>
                    <p class="text-muted mb-0">借助编程抽象实际问题，运用算法处理数据破解难题。</p>
                </div>
            </div>
        </div>
    </div>

    <hr>
    <footer>
        <p>&copy; 2024 Fun Code. All rights reserved.</p>
        <ul>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">使用条款</a></li>
            <li><a href="#">隐私政策</a></li>
        </ul>
    </footer>

</body>

</html>